
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
     
    <link rel="stylesheet"  href="user.css">
    <script src="./static/js/vue.global.js"></script>

   
        <link rel="stylesheet" href="./static/element-plus/index1.css" />
        <script src="./static/element-plus/index.full.js"></script>
 <style>
    .main{
        width: 1200px;
        margin: 0 auto;
       
        background-color: white;  
    }
    ul{
        list-style: none;
    }
    
 </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header style=" background-color: #fff;">
                <el-row style="display: flex;align-items:center">
                <el-col :span="4" style="display: flex;">
                     <div>
                          <el-image style="width: 60px; height:60px" src="./static/img/logo.png" :fit="fit">
                   
                     </div>    
                     <div>
                        <h1 style="padding-left:20px;">技术社区</h1>
                     </div>
                
                </el-col>
                    <el-col :span="8">
                        <el-menu mode="horizontal" style="border:0!important;margin-top:-10px ;">
                            <el-menu-item>首页</el-menu-item>
                            <el-menu-item>文章</el-menu-item>
                            <el-menu-item>课程</el-menu-item>
                            <el-menu-item>商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8">
                        <el-input style="width: 200px;" placeholder="请输入关键字"></el-input>
                    </el-col>
                    <el-col :span="4" >
                        
                        <el-button  type="text" v-on:click="alert('nb')">登录</el-button>            
                        <el-button  type="text">注册</el-button> 
                        
                    </el-col>
                   </el-row>
            </el-header>
            <el-container class="main">
                    <el-main>
                        <el-row>
                            <el-col :span="8" v-for="product in productList">
                                <el-card style="width: 250px; height:370px;margin: 5px;">
                                    <el-image :src="product.img"></el-image>
                                    <p>{{product.name}}</p>
                                    <el-row>
                                    <el-col :span="12">价格:{{product.price}}</el-col>
                                    <el-col :span="12">库存:{{product.stock}} </el-col></el-row>
                                        <el-button @click="addToCart(product)">加入购物车</el-button>
                                
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-aside>
                        <el-card>
                            <h2>购物车</h2>
                            <div v-if="cartItems.length>0">
                                  <el-row v-for="item in cartItems">
                                    <el-col :span="6" style="position:relative; top:10px; left: -10px;">
                                        <el-image :src="item.img"></el-image>
                                    </el-col>
                                    <el-col :span="18">
                                        <p>{{item.name}}</p>
                                        <p>¥{{item.price}}
                                            <el-input-number @click="handleChange(item)" v-model="item.count" :min='0' :max='item.stock' 
                                            style="float:right ;"/>
                                        </p>
                                    </el-col>
                                  </el-row>
                            </div>
                            <el-empty v-else description="">暂无商品</el-empty>
                            <div>
                                <el-col :span="10">总价:&nbsp;¥{{totalPrice}}</el-col>
                                <el-button type="primary">结算</el-button>
                            </div>
                        </el-card>
                    </el-aside>
            </el-container>
            <el-footer style="height: auto;">
                <el-row>
                   <el-col :span="8">
                       <div>
                       <el-image style="width: 100px; height:100px" src="./static/img/logo.png" :fit="fit">
                       </div>
                      <div style="position: relative; left: 100px; bottom: 100px;">   
                         <h1 style="padding:2px;">技术社区</h1>
                         <p>致力于构建一个专业胡IT技术交流社区</p>
                     </div>
                   </el-col>
                   <el-col :span="8" style="position: relative; top: 20px;">
                       <div>
                           <el-button type="text">首页</el-button>
                           <el-button type="text">文章</el-button>
                           <el-button type="text">课程</el-button>
                           <el-button type="text">商城</el-button>
                       </div>
                       <div>
                           <el-button type="text">关于我们</el-button>
                           <el-button type="text">使用手册</el-button>
                           <el-button type="text">隐私条款</el-button>
                           <el-button type="text">建议反馈</el-button>
                       </div>
                   </el-col>
                   <el-col :span="8" style="position:relative; bottom: -10px;line-height: 10px;">
                   <h1>联系我们</h1>
                   <div><P>电话:12345678</P>
                   <p>邮箱:software@develop.com</p></div>
                   </el-col>
                </el-row>
                <div style="position: relative; bottom: 100px; height:50px;line-height:50px;text-align:center;background-color:#409EFF">软件开发工作室版权所有</div>
       </el-footer>
   </el-container>
          
    </div>
</body>
  <script>
       const App={
        data(){
   return{ 
    productList: [
                    { type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: '../static/img/product01.png' },
                    { type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: '../static/img/product02.png' },
                    { type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: '../static/img/product03.png' },
                    { type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: '../static/img/product04.png' },
                    { type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: '../static/img/product05.png' },
                    { type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: '../static/img/product06.png' },
                    { type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: '../static/img/product07.png' },
                    { type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: '../static/img/product08.png' },],
                
           cartItems:[],
           totalPrice:0,   
   }
},
        methods:{
          addToCart(product){
            const item=this.cartItems.find((item) => item.name==product.name) ;
            if(item){
                item.count++;
            }else{
                this.cartItems.push({...product,count: 1});
            }
            this.calcPrice()
          },
          addCount(item){
            item.count++
          },
          inCount(item){
              item.count--
          },
          removeFromCart(item){
                const index=this.cartItems.indexOf(item);
                if(index>-1){
                    this.cartItems.splice(index,1)
                }
          },
          handleChange(item){
            if(item.count<=0){
                this.removeFromCart(item)
            }
           this.calcPrice()
          },
          calcPrice(){
            this.totalPrice=this.cartItems.reduce((total,item)=>{
                   return total+item.price*item.count
            },0)
          }
        }
       }
       Vue.createApp(App).use(ElementPlus).mount("#app")
  </script>
</html>